﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Event calendar</title>    
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link href="evtcal.css" rel="stylesheet" type="text/css" />
    <script src="eventcalendar.js" type="text/javascript"></script>
    <script src="evtcal2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({ autoOpen: false });
        });
    </script>
</head>
    <body>
        <table class="datacontainer">
            <thead><tr class="dsHead"><th>Id</th>               <th>Event title</th>              <th>Year</th>               <th>Month</th>             <th>Day</th>             <th>Hour</th>             <th>Minute</th>             <th>City</th>                   <th>Street Address</th>                         <th>Location details</th>                                                  <th>Event details</th>                              <th>Latitude</th>                     <th>Longitude</th></tr></thead>
            <tbody id="#datasource" class="datacontainer">
                <!--
                    This structure comes from the data source. (Write with ASP, PHP or what ever...)
                    Modify the data values and linecount, but please use format provided here.
                    There are two types of items, events (13 columns) and infos (3 columns).
                    Id-field is what ever url-encoded string or number.
                    Please be brief for all fields: QR-codes have SMS-style character limitations.
                -->
                <tr class="dsEvent"><td class="dsId">1231</td><td class="dsTitle">Test</td><td class="dsYear">2013</td><td class="dsMonth">05</td><td class="dsDay">07</td><td class="dsHour">17</td><td class="dsMinute">30</td><td class="dsCity">Helsinki</td><td class="dsStreetAddress">Rikhardinkatu 3</td><td class="dsLocationDetails">Rikhardinkadun kirjasto, Salonki, 3. krs</td><td class="dsEventDetails">(viitenumero: 11743)</td><td class="dsLatitude">60.1661552</td><td class="dsLongitude">24.9463225</td></tr>
                <tr class="dsEvent"><td class="dsId">1232</td><td class="dsTitle">Test</td><td class="dsYear">2013</td><td class="dsMonth">05</td><td class="dsDay">16</td><td class="dsHour">17</td><td class="dsMinute">30</td><td class="dsCity">Tampere</td><td class="dsStreetAddress">Kirjastotalo Metso, Pirkankatu 2</td><td class="dsLocationDetails">Toivonen-sali, muumikerros</td><td class="dsEventDetails">(viitenumero: 11620)</td><td class="dsLatitude">61.4977606</td><td class="dsLongitude">23.7507924</td></tr>
                <tr class="dsEvent"><td class="dsId">1233</td><td class="dsTitle">Test</td><td class="dsYear">2013</td><td class="dsMonth">05</td><td class="dsDay">22</td><td class="dsHour">18</td><td class="dsMinute">00</td><td class="dsCity">Lappeenranta</td><td class="dsStreetAddress">Villimiehenkatu 1</td><td class="dsLocationDetails"></td><td class="dsEventDetails">(viitenumero: 11905)</td><td class="dsLatitude">61.0573018</td><td class="dsLongitude">28.1917542</td></tr>
                <tr class="dsEvent"><td class="dsId">1234</td><td class="dsTitle">Test</td><td class="dsYear">2013</td><td class="dsMonth">05</td><td class="dsDay">25</td><td class="dsHour">13</td><td class="dsMinute">00</td><td class="dsCity">Seinäjoki</td><td class="dsStreetAddress">Alvar Aallon katu 14</td><td class="dsLocationDetails">Pääkirjasto Apila, Jaaksi 3 (pieni kokoustila/atk-luokka)</td><td class="dsEventDetails">(viitenumero: 11879)</td><td class="dsLatitude">62.7858996</td><td class="dsLongitude">22.8402672</td></tr>
                <tr class="dsEvent"><td class="dsId">1235</td><td class="dsTitle">Test</td><td class="dsYear">2013</td><td class="dsMonth">05</td><td class="dsDay">25</td><td class="dsHour">13</td><td class="dsMinute">00</td><td class="dsCity">Turku</td><td class="dsStreetAddress">Rauhankatu 1</td><td class="dsLocationDetails"></td><td class="dsEventDetails">(viitenumero: 11879)</td><td class="dsLatitude">60.4526784</td><td class="dsLongitude">22.2573233</td></tr>
                <tr class="dsEvent"><td class="dsId">1236</td><td class="dsTitle">Test</td><td class="dsYear">2013</td><td class="dsMonth">05</td><td class="dsDay">25</td><td class="dsHour">14</td><td class="dsMinute">30</td><td class="dsCity">Helsinki</td><td class="dsStreetAddress">Rikhardinkatu 3</td><td class="dsLocationDetails">Rikhardinkadun kirjasto, Salonki, 3. krs</td><td class="dsEventDetails">(viitenumero: 11895)</td><td class="dsLatitude">60.1661552</td><td class="dsLongitude">24.9463225</td></tr>
                <tr class="dsInfo"><td class="dsId">1237</td><td colspan="9" class="dsTitle">Global test day 1.10.2013</td><td colspan="3" class="dsDetails">Some more info to come...</td></tr>
                <!-- End of events. -->
            </tbody>
        </table>

        <div style="display:inline;float:right">

            You can zoom with mouse...
            <div id="mapContainer"></div>
        </div>
        
        <div style="width: 600px;"><div style="display:inline;float:right"><div class="datepicker" id="datepicker"></div></div></div>

        <h1 class="maintopic">Test</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie orci sit amet urna euismod id pulvinar mauris blandit. Integer ac purus dui. In ac nisl quis purus feugiat euismod quis et metus. In sodales sollicitudin placerat. 
        </p>
        <p>
            Vivamus gravida iaculis tincidunt. Nam sodales, nisi sed luctus sollicitudin, magna quam suscipit tortor, vel condimentum sapien odio tristique neque. Nunc malesuada velit et ligula semper molestie. Donec ipsum dui, cursus at cursus eu, venenatis ac diam. Phasellus dolor metus, auctor sit amet congue id, vestibulum ac est. Integer et placerat sem. Suspendisse dignissim sollicitudin dui, eget rhoncus justo rutrum at. Vestibulum vehicula malesuada ante, vitae porta metus ornare a.
        </p>
        <div id="maineventlist"></div>
        <div id="dialog" title="QR-Code">
            <p>Scan this with your mobile phone QR-reader to get event notification.</p>
            <img id="iQRCode" alt="QR-code" />
        </div>
    </body>
</html>

